<template>
  <el-popover title="Config" v-model="visible" popper-class="popover-modal" width="610" trigger="click" placement="right" @show="init">
    <el-form :model="dataForm" ref="dataForm" label-position="left" label-width="140px">
      <el-form-item label="custom plan" prop="isCustomOpen">
        <el-radio-group v-model="dataForm.isCustomOpen">
          <el-radio v-for="item in options" :key="item.value" :label="item.value">{{ item.title }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Exchange Rate" prop="forexRate">
        <span slot="label">
          <span>
            Exchange Rate
            <el-popover placement="bottom-start" width="220" trigger="hover" content="SGD => CNY">
              <i slot="reference" class="el-icon-warning-outline"></i>
            </el-popover>
          </span>
        </span>
        <el-input-number v-model="dataForm.forexRate" controls-position="right" :min="0" :step="0.01" label="FX Rate"></el-input-number>
      </el-form-item>
      <div class="footer">
        <el-button size="mini" type="primary" @click="dataFormSubmit">OK</el-button>
        <el-button size="mini" @click="closePopover">Cancel</el-button>
      </div>
    </el-form>
    <template slot="reference">
      <slot></slot>
    </template>
  </el-popover>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        isCustomOpen: 1,
        forexRate: 1,
      },
      options: [
        {
          title: "Yes",
          value: 1,
        },
        {
          title: "No",
          value: 0,
        },
      ],
    };
  },
  methods: {
    async init() {
      const { data } = await this.$http.get(`/stPlanMetaManage/detail`);
      this.dataForm = { ...this.dataForm, ...data };
    },
    closePopover() {
      this.visible = false;
    },
    async dataFormSubmit() {
      const { code, msg } = await this.$http.post(`/stPlanMetaManage/update`, this.dataForm);
      if (code === 200) {
        this.$message({
          message: "success",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.visible = false;
          },
        });
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>
